<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<title>jQuery jCrop Image Sandbox</title>
<script type="text/javascript">
var width = 625;
var height = 150;

function showCoords(c)
{
   // variables can be accessed here as
   //console.log(c.x + ", " + c.y + ", " + c.x2 + ", " + c.y2 + ", " + c.w + ", " + c.h);
   $("#x").text(parseInt(c.x));
   $("#start_x").val(parseInt(c.x));
   $("#y").text(parseInt(c.y));
   $("#start_y").val(parseInt(c.y));
   $("#x2").text(parseInt(c.x2));
   $("#delta_x").val(parseInt(c.x2));
   $("#y2").text(parseInt(c.y2));
   $("#delta_y").val(parseInt(c.y2));
   $("#width").val(parseInt(c.w));
   $("#height").val(parseInt(c.h));
};
jQuery(function($) {
	$('#target').Jcrop({
		aspectRatio: width / height,
        onSelect: showCoords,
        onChange: showCoords
	});
});
</script>
<style>
* {
	margin: 0;
	padding: 0;
}

#background {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top,  #0e0e0e 0%, #7d7e7d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e0e0e), color-stop(100%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0e0e0e 0%,#7d7e7d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0e0e0e 0%,#7d7e7d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0e0e0e 0%,#7d7e7d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0e0e0e 0%,#7d7e7d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */

}

#page {
	margin: 0 auto;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

	
	padding: 0 20px 20px 20px;
	width: 1000px;
	border-left: 1px #666 solid;
	border-right: 1px #666 solid;
	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.75);
}

#image-container {
	display: inline-block;
	margin: 20px auto;
	padding: 10px;
background: #feffe8; /* Old browsers */
background: -moz-linear-gradient(top,  #feffe8 0%, #d6dbbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feffe8 0%,#d6dbbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feffe8 0%,#d6dbbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feffe8 0%,#d6dbbf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feffe8 0%,#d6dbbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */
	border: 2px #666666 solid;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

#coordinates-container {
margin-top: 10px;
 width: 100%;
}

#coordinates-container {
}

td.coord-value {
	width: 15%;
	padding: 3px 6px;
	border: 1px #666 solid;
	color: #000;
	width: 50px;
	background: #e5e5e5;
}

td.coord-info {
	padding: 3px 6px;
	text-align: right;
}

img#target {
	border: 2px #FF0000 solid;
}

</style>
</head>
<body>
	<div id ="background">
		<div id="page">
			<div id="image-container">
				<img src="communication.jpg" id="target" />
				<table id="coordinates-container">
					<tbody>
						<tr>
							<td class="coord-info">X &#58; </td><td id="x" class="coord-value"></td>
							<td class="coord-info">Y &#58; </td><td id="y" class="coord-value"></td>
							<td class="coord-info">Delta X &#58; </td><td id="x2" class="coord-value"></td>
							<td class="coord-info">Delta Y &#58; </td><td id="y2" class="coord-value"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<form method="GET" action="./crop.php">
				<input type="hidden" id="image_name" name="image_name" value="communication.jpg" />
				<input type="hidden" id="start_x" name="start_x" value="" />
				<input type="hidden" id="start_y" name="start_y" value="" />
				<input type="hidden" id="delta_x" name="delta_x" value="" />
				<input type="hidden" id="delta_y" name="delta_y" value="" />
				<input type="hidden" id="width" name="width" value="" />
				<input type="hidden" id="height" name="height" value="" />
				<input type="hidden" id="width_ratio" name="width_ratio" value="625" />
				<input type="hidden" id="height_ratio" name="height_ratio" value="150" />
				<input type="submit" value="CROP IMAGE" />
			</form>
		</div>
	</div>
</body>
</html>